<style>
    body {
        background: #fff;
        overflow: hidden;
        padding: 10px;
    }

    .panel {
        height: 290px;
        overflow: scroll;
    }
</style>
<div class="panel">
    <table class="uk-table  uk-table-responsive  uk-table-striped uk-table-hover uk-table-middle dux-table dux-table-dialog">
        <thead>
        <tr>
            <th width="100"><input type="checkbox" value="" id="sel"></th>
            <th class="uk-text-left">省份</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td><input type="checkbox" value="北京市"></td>
            <td>北京市</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="天津市"></td>
            <td>天津市</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="河北省"></td>
            <td>河北省</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="山西省"></td>
            <td>山西省</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="内蒙古自治区"></td>
            <td>内蒙古自治区</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="辽宁省"></td>
            <td>辽宁省</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="吉林省"></td>
            <td>吉林省</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="黑龙江省"></td>
            <td>黑龙江省</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="上海市"></td>
            <td>上海市</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="江苏省"></td>
            <td>江苏省</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="浙江省"></td>
            <td>浙江省</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="安徽省"></td>
            <td>安徽省</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="福建省"></td>
            <td>福建省</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="江西省"></td>
            <td>江西省</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="山东省"></td>
            <td>山东省</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="河南省"></td>
            <td>河南省</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="湖北省"></td>
            <td>湖北省</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="湖南省"></td>
            <td>湖南省</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="广东省"></td>
            <td>广东省</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="广西壮族自治区"></td>
            <td>广西壮族自治区</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="海南省"></td>
            <td>海南省</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="重庆市"></td>
            <td>重庆市</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="四川省"></td>
            <td>四川省</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="贵州省"></td>
            <td>贵州省</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="云南省"></td>
            <td>云南省</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="西藏自治区"></td>
            <td>西藏自治区</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="陕西省"></td>
            <td>陕西省</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="甘肃省"></td>
            <td>甘肃省</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="青海省"></td>
            <td>青海省</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="宁夏回族自治区"></td>
            <td>宁夏回族自治区</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="新疆维吾尔自治区"></td>
            <td>新疆维吾尔自治区</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="台湾省"></td>
            <td>台湾省</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="香港特别行政区"></td>
            <td>香港特别行政区</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="澳门特别行政区"></td>
            <td>澳门特别行政区</td>
        </tr>
        </tbody>
    </table>
</div>
<div class="dux-dialog-foot">
    <button class="uk-button uk-button-primary" type="button" id="add">确认添加</button>
</div>

<script>
    $('#sel').bind("click", function () {
        if ($(this).is(":checked")) {
            $('input[type=checkbox]').prop('checked', true);
        } else {
            $('input[type=checkbox]').prop('checked', false);
        }
    });
    $('#add').bind('click', function () {
        var area = [];
        $('input[type=checkbox]:checked').each(function () {
            var name = $(this).val();
            if (name !== '') {
                area.push(name);
            }
        });
        area = area.join(',');

        window.parent.addArea('{$id}', area);
        parent.dialog.close();
    });
</script>